<template>
	<view class="common-container">
		<view class="add-visitor-btn" @click="toBalance">
			<text class="add-icon">+</text>
			<text class="add-text">添加游客</text>
		</view>
		<view class="visitor-info-title">游客信息</view>
		<view class="visitor-list">
			<view v-if="visitors.length > 0">
				<view class="visitor-item" v-for="(item, index) in visitors" :key="index">
					<view class="visitor-name">
						{{ item.name }}
						<image src="https://aw2025ht.kangye.xyz/api/profile/upload/_修改订单 (1).png" mode="widthFix"
							class="edit-icon" @click="openEditModal(index)" />
						<!-- 删除按钮 -->
						<image src="https://aw2025ht.kangye.xyz/api/profile/upload/删 除 (1).png" mode="widthFix"
							class="delete-icon" @click="deleteVisitor(index)" />
					</view>
					<view class="visitor-certificate">
						<image src="@/static/image/身份证 (3).png" mode="widthFix" class="certificate-icon" />
						{{ item.certificateNumber }}
					</view>
					<view class="visitor-phone">
						<image src="@/static/image/电话 (1).png" mode="widthFix" class="phone-icon" />
						{{ item.phoneNumber }}
					</view>
					<view class="select-radio">
						<view :class="{'radio-selected': item.checked, 'radio-default': !item.checked}"
							@click="toggleCheck(index)"></view>
					</view>
				</view>
			</view>
			<view v-else class="visitor-item-empty">
				暂无游客信息
			</view>
		</view>

		<view class="continue-btn" @click="goToNextStep">
			继续购票
		</view>

		<view v-if="showEditModal" class="edit-modal">
			<view class="modal-overlay" @click="showEditModal = false"></view>
			<view class="modal-box">
				<view class="modal-header">
					<text class="modal-title">修改游客信息</text>
					<text class="close-btn" @click="showEditModal = false">×</text>
				</view>
				<view class="modal-content">
					<view class="form-item">
						<text class="form-label">姓名：</text>
						<input v-model="editName" placeholder="请输入姓名" />
					</view>
					<view class="form-item">
						<text class="form-label">证件号：</text>
						<input v-model="editCertificateNumber" placeholder="请输入证件号" />
					</view>
					<view class="form-item">
						<text class="form-label">联系电话：</text>
						<input v-model="editPhoneNumber" placeholder="请输入联系电话" />
					</view>
				</view>
				<view class="modal-footer">
					<text class="cancel-btn" @click="showEditModal = false">取消</text>
					<text class="confirm-btn" @click="confirmEdit">确认修改</text>
				</view>
			</view>
		</view>

		<view v-if="showAlert" class="alert">
			<text class="alert-text">请至少选择一个游客!</text>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';

	const visitors = ref([]);
	const showAlert = ref(false);
	const showEditModal = ref(false);
	const editIndex = ref(-1); // 当前编辑的游客索引
	const editName = ref('');
	const editCertificateNumber = ref('');
	const editPhoneNumber = ref('');

	// 加载游客数据
	const fetchVisitors = () => {
		visitors.value = uni.getStorageSync('contacts') || [];
	};

	// 切换选中状态
	const toggleCheck = (index) => {
		visitors.value[index].checked = !visitors.value[index].checked;
	};

	// 前往下一步
	const goToNextStep = () => {
		const selectedVisitors = visitors.value.filter(item => item.checked);
		if (selectedVisitors.length === 0) {
			showAlert.value = true;
			setTimeout(() => showAlert.value = false, 3000);
		} else {
			uni.setStorageSync('selectedVisitors', selectedVisitors);
			uni.showToast({
				title: '添加成功',
				icon: 'success',
				duration: 2000
			});
		}
	};

	// 显示修改弹窗
	const openEditModal = (index) => {
		editIndex.value = index;
		const visitor = visitors.value[index];
		editName.value = visitor.name;
		editCertificateNumber.value = visitor.certificateNumber;
		editPhoneNumber.value = visitor.phoneNumber;
		showEditModal.value = true;
	};

	// 确认修改
	const confirmEdit = () => {
		if (editIndex.value === -1) return;

		visitors.value[editIndex.value] = {
			...visitors.value[editIndex.value],
			name: editName.value,
			certificateNumber: editCertificateNumber.value,
			phoneNumber: editPhoneNumber.value
		};

		uni.setStorageSync('contacts', visitors.value);
		showEditModal.value = false;
		uni.showToast({
			title: '修改成功',
			icon: 'success',
			duration: 2000
		});
	};

	// 删除游客
	const deleteVisitor = async (index) => {
		const confirmResult = await uni.showModal({
			title: '确认删除',
			content: '是否确认删除该游客信息？'
		});

		if (confirmResult.confirm) {
			visitors.value.splice(index, 1);
			uni.setStorageSync('contacts', visitors.value);
			uni.showToast({
				title: '删除成功',
				icon: 'success',
				duration: 2000
			});
		}
	};

	// 生命周期
	onMounted(() => fetchVisitors());
	onShow(() => fetchVisitors());

	// 跳转添加页面
	const toBalance = () => {
		uni.navigateTo({
			url: '/packagenew/pages/tianJiaYouKe/tianJiaYouKe'
		});
	};
</script>

<style scoped>
	/* 新增删除按钮样式 */
	.delete-icon {
		width: 16px;
		height: 16px;
		cursor: pointer;
		margin-left: 8px;
		/* filter: invert(90%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(120%) contrast(90%); */
	}

	/* 修改弹窗样式 */
	.edit-modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 9999;
	}

	.modal-overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
	}

	.modal-box {
		background-color: white;
		border-radius: 8px;
		width: 80%;
		max-width: 400px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		z-index: 1;
	}

	.modal-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16px;
		border-bottom: 1px solid #f0f0f0;
	}

	.modal-title {
		font-size: 18px;
		font-weight: 600;
	}

	.close-btn {
		font-size: 24px;
		cursor: pointer;
		color: #999;
	}

	.modal-content {
		padding: 24px;
	}

	.form-item {
		margin-bottom: 16px;
	}

	.form-label {
		display: inline-block;
		width: 80px;
		font-size: 14px;
		color: #666;
	}

	.modal-footer {
		display: flex;
		justify-content: flex-end;
		padding: 16px;
		border-top: 1px solid #f0f0f0;
	}

	.cancel-btn,
	.confirm-btn {
		padding: 8px 16px;
		cursor: pointer;
		border-radius: 4px;
	}

	.cancel-btn {
		color: #666;
		margin-right: 10px;
	}

	.confirm-btn {
		color: white;
		background-color: #1866f2;
	}

	.common-container {
		padding: 20px;
		background-color: #f8f9fa;
		min-height: 75vh;
		display: flex;
		flex-direction: column;
	}

	.add-visitor-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #e6f2ff;
		padding: 8px 16px;
		border-radius: 20px;
		margin-bottom: 20px;
	}

	.add-icon {
		color: #1866f2;
		font-size: 14px;
		margin-right: 4px;
	}

	.add-text {
		color: #1866f2;
		font-size: 14px;
	}

	.visitor-info-title {
		font-size: 16px;
		color: #333;
		font-weight: 500;
		margin-bottom: 16px;
	}

	.visitor-list {
		flex: 1;
		overflow-y: auto;
	}

	.visitor-item {
		background-color: white;
		padding: 16px;
		border-radius: 8px;
		margin-bottom: 12px;
		display: flex;
		flex-direction: column;
		/* background-color: #eee; */
		gap: 8px;
	}

	.visitor-name {
		display: flex;
		align-items: center;
		gap: 8px;
		font-size: 15px;
		color: #333;
	}

	.edit-icon {
		width: 16px;
		height: 16px;
		cursor: pointer;
	}

	.visitor-certificate,
	.visitor-phone {
		display: flex;
		align-items: center;
		gap: 4px;
		font-size: 14px;
		color: #666;
	}

	.certificate-icon,
	.phone-icon {
		width: 16px;
		height: 16px;
		/* background-color: #eee; */
		border-radius: 2px;
	}

	.select-radio {
		align-self: flex-end;
	}

	/* 默认未选中状态，灰色边框 */
	.radio-default {
		width: 16px;
		height: 16px;
		border: 2px solid #ccc;
		border-radius: 50%;
	}

	/* 选中状态，蓝色边框 */
	.radio-selected {
		width: 16px;
		height: 16px;
		border: 2px solid #1866f2;
		border-radius: 50%;
		position: relative;
	}

	.radio-selected::after {
		content: '';
		width: 8px;
		height: 8px;
		background-color: #1866f2;
		border-radius: 50%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.continue-btn {
		background-color: #1866f2;
		color: white;
		text-align: center;
		padding: 12px;
		border-radius: 24px;
		font-size: 16px;
		margin-top: auto;
	}

	/* 弹框样式 */
	.alert {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: rgba(0, 0, 0, 0.7);
		color: white;
		padding: 16px 24px;
		border-radius: 8px;
		z-index: 9999;
	}

	.alert-text {
		font-size: 16px;
	}

	/* 新增无数据占位样式 */
	.visitor-item-empty {
		background-color: white;
		padding: 16px;
		border-radius: 8px;
		margin-bottom: 12px;
		text-align: center;
		color: #666;
		font-size: 14px;
		min-height: 120px;
		/* 保持布局高度一致 */
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>